<template>
    <div  class="gwc1">
        <!-- 不指定单位，默认为 px -->
        <van-empty
            image="/img/gwd/empty.png"
            image-size="76"
            description="您还没有选购您的商品"
        />

        <div class="gwc_2">
             <h2>推荐商品</h2><br>
            <h3>Sincerely Recommend</h3>
        </div>
         <section class="right">
                <div class="top">
                    <ul class="p_list">
                        <li class="common_list_item">
                            <div class="item_info">
                                <div class="item_message">
                                    <a href="" class="img_link">
                                       <van-image
                                            width="4.2rem"
                                            height="4.2rem"
                                            fit="cover"
                                            position="left"
                                            src="/img/gwd/list_12287.jpg"
                                        />
                                        <p class="corner_mark">
                                            <b>9种口味</b>
                                        </p>
                                    </a>
                                    <div class="item_detail">
                                        <div class="name_wrap">
                                            <h3>环游世界</h3>
                                        </div>
                                        <div class="price">
                                            <p class="new_price">
                                                <b>￥258/0.8磅&nbsp;&nbsp;&nbsp;</b>
                                                 <span><a href="">+</a></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        <section class="right">
                <div class="top">
                    <ul class="p_list">
                        <li class="common_list_item">
                            <div class="item_info">
                                <div class="item_message">
                                    <a href="" class="img_link">
                                       <van-image
                                            width="4.2rem"
                                            height="4.2rem"
                                            fit="cover"
                                            position="left"
                                            src="/img/gwd/list_27653.jpg"
                                        />
                                        <p class="corner_mark">
                                            <b>鲜果系列</b>
                                        </p>
                                    </a>
                                    <div class="item_detail">
                                        <div class="name_wrap">
                                            <h3>奶芙莓莓</h3>
                                        </div>
                                        <div class="price">
                                            <p class="new_price">
                                                <b>￥336/2磅&nbsp;&nbsp;&nbsp;</b>
                                                 <span><a href="">+</a></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        <section class="right">
                <div class="top">
                    <ul class="p_list">
                        <li class="common_list_item">
                            <div class="item_info">
                                <div class="item_message">
                                    <a href="" class="img_link">
                                       <van-image
                                            width="4.2rem"
                                            height="4.2rem"
                                            fit="cover"
                                            position="left"
                                            src="/img/gwd/list_27647.jpg"
                                        />
                                        <p class="corner_mark">
                                            <b>新品上市</b>
                                        </p>
                                    </a>
                                    <div class="item_detail">
                                        <div class="name_wrap">
                                            <h3>星云知秋</h3>
                                        </div>
                                        <div class="price">
                                            <p class="new_price">
                                                <b>￥218/1磅&nbsp;&nbsp;&nbsp;</b>
                                                 <span><a href="">+</a></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
            <section class="right">
                <div class="top">
                    <ul class="p_list">
                        <li class="common_list_item">
                            <div class="item_info">
                                <div class="item_message">
                                    <a href="" class="img_link">
                                       <van-image
                                            width="4.2rem"
                                            height="4.2rem"
                                            fit="cover"
                                            position="left"
                                            src="/img/gwd/list_12253.jpg"
                                        />
                                    </a>
                                    <div class="item_detail">
                                        <div class="name_wrap">
                                            <h3>阿尔蒙麦香</h3>
                                        </div>
                                        <div class="price">
                                            <p class="new_price">
                                                <b>￥218/0.8磅&nbsp;&nbsp;&nbsp;</b>
                                                 <span><a href="">+</a></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        <section class="right">
                <div class="top">
                    <ul class="p_list">
                        <li class="common_list_item">
                            <div class="item_info">
                                <div class="item_message">
                                    <a href="" class="img_link">
                                       <van-image
                                            width="4.2rem"
                                            height="4.2rem"
                                            fit="cover"
                                            position="left"
                                            src="/img/gwd/list_10473.jpg"
                                        />
                                    </a>
                                    <div class="item_detail">
                                        <div class="name_wrap">
                                            <h3>巧克力四重奏</h3>
                                        </div>
                                        <div class="price">
                                            <p class="new_price">
                                                <b>￥218/1磅&nbsp;&nbsp;&nbsp;</b>
                                                 <span><a href="">+</a></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        <section class="right">
                <div class="top">
                    <ul class="p_list">
                        <li class="common_list_item">
                            <div class="item_info">
                                <div class="item_message">
                                    <a href="" class="img_link">
                                       <van-image
                                            width="4.2rem"
                                            height="4.2rem"
                                            fit="cover"
                                            position="left"
                                            src="/img/gwd/list_26553.jpg"
                                        />
                                    </a>
                                    <div class="item_detail">
                                        <div class="name_wrap">
                                            <h3>提拉米苏心意</h3>
                                        </div>
                                        <div class="price">
                                            <p class="new_price">
                                                <b>￥298/1磅&nbsp;&nbsp;&nbsp;</b>
                                                 <span><a href="">+</a></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        <section class="right">
                <div class="top">
                    <ul class="p_list">
                        <li class="common_list_item">
                            <div class="item_info">
                                <div class="item_message">
                                    <a href="" class="img_link">
                                       <van-image
                                            width="4.2rem"
                                            height="4.2rem"
                                            fit="cover"
                                            position="left"
                                            src="/img/gwd/list_26628.jpg"
                                        />
                                    </a>
                                    <div class="item_detail">
                                        <div class="name_wrap">
                                            <h3>杨枝甘露卷</h3>
                                        </div>
                                        <div class="price">
                                            <p class="new_price">
                                                <b>￥218/1.1磅&nbsp;&nbsp;&nbsp;</b>
                                                 <span><a href="">+</a></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
        <section class="right">
                <div class="top">
                    <ul class="p_list">
                        <li class="common_list_item">
                            <div class="item_info">
                                <div class="item_message">
                                    <a href="" class="img_link">
                                       <van-image
                                            width="4.2rem"
                                            height="4.2rem"
                                            fit="cover"
                                            position="left"
                                            src="/img/gwd/list_26397.jpg"
                                        />
                                    </a>
                                    <div class="item_detail">
                                        <div class="name_wrap">
                                            <h3>午后花园</h3>
                                        </div>
                                        <div class="price">
                                            <p class="new_price">
                                                <b>￥218/1磅&nbsp;&nbsp;&nbsp;</b>
                                                 <span><a href="">+</a></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                gwc1: {}
            }
        },
    }
</script>

<style lang="scss" scoped>
html{
    font-size: 100px;
}
.van-empty{
    width: 100%;
    height: 220px;
}
.van-empty__description{
    font-size: 12px;
    color: #9c9c9c;
}
.gwc_2{
    // width: 100%;
    height: 100%;
    border-top: 1px solid #A38D68;
    margin:0 16px;
    padding: 20px 0 16px;
    margin-right: 16px;
    color: #A38D68;
    text-align: center;
    max-width: 640px;
    margin: auto;
}
.gwc_2 h2{
    font-size: 15px;
    font-weight: bold;
}
.rights_title{
    font-size: 18px;
    padding: 30px 0 10px 0;
    text-align: center;
    margin-top: 0;
    position: relative;
}
.rights_title p{
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
}
.rights_title p:before{
    content: '';
    width: 65.5px;
    height: 3px;
    background:url(/public/img/vip/line_left.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 5%;
    top: 50%;
}
.rights_title p:after{
    content: '';
    width: 65.5px;
    height: 3px;
    background: url(/public/img/vip/line_right.png) no-repeat center;
    position: absolute;
    right: 5%;
    top: 50%;
}
.rights_title a{
    display: block;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    color: #c9c9c9;
    text-decoration: underline;
    padding-top: 20px;
}
.right .top{
    padding: 0 4%;
    margin: auto;
    border: 0;
    color: #3e3e3e;
    margin: auto;
    max-width: 560px;
}
.right .top .title{
    display: block;
}
.right .top .title a{
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    width: 50%;
    color: #3e3e3e;
}
.right .top .desc{
    color: #c9c9c9;
    margin-top: 10px;
}
.right .top .desc p{
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.right .top .p_list{
    margin-top: 15px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.right .top  ul li{
    float: left;
    width: 48%;
    // height: 48%;
    position: relative;
    display: list-item;
    color: #3e3e3e;
    vertical-align: top;
    margin-left: 6px;
    padding: 0;
    border: 0;
}
.right .top  ul li .item_info{
    // padding: 0 0 12px;
    font-size: 12px;
}
.right .top  ul li .item_message{
    position: relative;
    margin: auto;
     margin-bottom: 8px;
}
.right .top  .corner_mark{
    position: absolute;
    width: 53px;
    height: 54px;
    // left: -2px;
    top: -10px;
    background: url(/public/img/vip/cornerMark.png) no-repeat;
    background-size: 100% 100%;
    // overflow: hidden;
    z-index: 2;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.right .top  .corner_mark b{
    position: absolute;
    width: 100%;
    height: 12px;
    line-height: 12px;
    color: #483f35;
    transform: rotate(-45deg);
    text-align: center;
    left: -6px;
    top: 13px;
    overflow: hidden;
}
.right .top .item_detal{
    // position: relative;
    height: 68px;
    padding: 2px 0;
    font-size: 12px;
}
.right .top .item_detal .name_wrap{
    height: 50px;
    overflow: hidden;

}
.right .top .item_detal h3{
    padding: 2px 0;
    line-height: 16px;
}
.right .top .item_detal h4{
    display: block;
    background-color: red;
}
.right .top .price{
    color: #cea461;
    display: inline-block;
    margin-right: 2px;
    font-size: 14px;
    margin-top: 20px;
}
.price p span{
    display: block;
    width: 15px;
    height: 15px;
    max-height: 20px;
    max-width: 20px;
    background-color: red;
    float: right;
    text-align: center;
}
.price p span a{
    color: #fff;
    line-height: 15px;
}
</style>